{% extends 'base.html' %}

{% block title %}仪表板 - 固定资产管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h2>仪表板</h2>
        <p class="text-muted">系统概览和关键指标</p>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-white bg-primary">
            <div class="card-body">
                <h5 class="card-title">资产总数</h5>
                <p class="card-text display-4">{{ total_assets }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-success">
            <div class="card-body">
                <h5 class="card-title">组织数量</h5>
                <p class="card-text display-4">{{ total_organizations }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-info">
            <div class="card-body">
                <h5 class="card-title">部门数量</h5>
                <p class="card-text display-4">{{ total_departments }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-warning">
            <div class="card-body">
                <h5 class="card-title">用户数量</h5>
                <p class="card-text display-4">{{ total_users }}</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5>资产状态统计</h5>
            </div>
            <div class="card-body">
                <div id="assetStatusChart" style="height: 300px;"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5>资产类别统计</h5>
            </div>
            <div class="card-body">
                <div id="assetCategoryChart" style="height: 300px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5>最近操作日志</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>资产编号</th>
                                <th>操作类型</th>
                                <th>操作人</th>
                                <th>描述</th>
                                <th>操作时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in recent_logs %}
                            <tr>
                                <td>{{ log.asset.asset_number }}</td>
                                <td>
                                    {% if log.action == 'create' %}创建
                                    {% elif log.action == 'update' %}更新
                                    {% elif log.action == 'allocate' %}分配
                                    {% elif log.action == 'transfer' %}转移
                                    {% elif log.action == 'maintenance' %}维修
                                    {% elif log.action == 'scrap' %}报废
                                    {% endif %}
                                </td>
                                <td>{{ log.operator.username|default:'系统' }}</td>
                                <td>{{ log.description }}</td>
                                <td>{{ log.created_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center">暂无操作日志</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 资产状态统计图表
var assetStatusChart = echarts.init(document.getElementById('assetStatusChart'));

// 准备状态数据
var statusData = [];
var statusNames = {
    'idle': '闲置',
    'in_use': '在用',
    'maintenance': '维修中',
    'scrapped': '已报废'
};

{% for stat in asset_status_stats %}
    statusData.push({
        value: {{ stat.count }},
        name: statusNames['{{ stat.status }}'] || '{{ stat.status }}'
    });
{% endfor %}

var statusOption = {
    title: {
        text: '资产状态分布',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '资产状态',
            type: 'pie',
            radius: '50%',
            data: statusData,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

assetStatusChart.setOption(statusOption);

// 资产类别统计图表
var assetCategoryChart = echarts.init(document.getElementById('assetCategoryChart'));

var categoryData = [
    {% for stat in asset_category_stats %}
        {value: {{ stat.count }}, name: '{{ stat.category__name }}'},
    {% endfor %}
];

var categoryOption = {
    title: {
        text: '资产类别分布',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '资产类别',
            type: 'pie',
            radius: '50%',
            data: categoryData,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

assetCategoryChart.setOption(categoryOption);

// 窗口大小改变时重置图表大小
window.addEventListener('resize', function() {
    assetStatusChart.resize();
    assetCategoryChart.resize();
});
</script>
{% endblock %}